<script setup lang="ts">
import { cityPinia } from '../stores/home'
import { useRouter } from 'vue-router'
import {getCity} from '../api/api'
import { ref,onMounted } from 'vue'
import { storeToRefs } from 'pinia'
const cityStore = cityPinia()
const {city} = storeToRefs(cityStore)
const cities = ref()
const hotCities = ref()
const router = useRouter();

const getCities = async()=>{
    let data = await getCity()
    console.log(data);
    cities.value = data.cts
    hotCities.value = data.hot
    console.log(cities.value,hotCities.value);
    for(let i=0;i<cityList.value.length;i++){
        cities.value.forEach(element => {
            if(element.py[0].toUpperCase()==cityList.value[i]?.letter){
                cityList.value[i].cts.push(element)
            }
        });
    }
}
const cityList = ref(
    [
        {letter:'A',cts:[]},{letter:'B',cts:[]},
        {letter:'C',cts:[]},{letter:'D',cts:[]},
        {letter:'E',cts:[]},{letter:'F',cts:[]},
        {letter:'G',cts:[]},{letter:'H',cts:[]},
        {letter:'I',cts:[]},{letter:'J',cts:[]},
        {letter:'K',cts:[]},{letter:'L',cts:[]},
        {letter:'M',cts:[]},{letter:'N',cts:[]},
        {letter:'O',cts:[]},{letter:'P',cts:[]},
        {letter:'Q',cts:[]},{letter:'R',cts:[]},
        {letter:'S',cts:[]},{letter:'T',cts:[]},
        {letter:'U',cts:[]},{letter:'V',cts:[]},
        {letter:'W',cts:[]},{letter:'X',cts:[]},
        {letter:'Y',cts:[]},{letter:'Z',cts:[]},
    ]
)
const changeCity = (city:string,id:number)=>{
    console.log(city,id);
    cityStore.$patch(state=>{
        state.cityId = id 
    })

    cityStore.$patch(state=>{
        state.city = city 
    })
    router.push('/home')
}
onMounted(()=>{
    getCities()
    console.log(cityList.value);
})
</script>

<template>
    <!-- <div>位置</div> -->
    <div class="pos">
        <div class="title" id="pos">定位城市</div>
        <div class="content">
            <button>定位失败，请稍后重试</button>
        </div>
    </div>
    <div class="nearly">
        <div class="title" id="nearly">最近访问城市</div>
        <div class="content">
            <button>{{ city }}</button>
        </div>
    </div>
    <div class="hot">
        <div class="title" id="hot">热门城市</div>
        <div class="content">
            <button v-for="(el,index) in hotCities" :key="index">{{ el }}</button>
        </div>
    </div>
    <ul class="letter">
        <li v-for="(el,index) in cityList" :key="index" :id="el.letter">
            <div class="title">{{ el.letter }}</div>
            <ol>
                <li class="city" v-for="city in el.cts" :key="city.id" @click="changeCity(city.nm,city.id)">{{ city.nm }}</li>
            </ol>
        </li>
    </ul>
    <div class="nav">
        <ul>
            <li><a href="#pos">定位</a></li>
            <li><a href="#nearly">最近</a></li>
            <li><a href="#hot">热门</a></li>
            <li v-for="(el,index) in cityList" :key="index">
                <a :href="`#${el.letter}`">{{ el.letter }}</a>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.title{
    font-size: 15px;
    height: 30px;
    background-color: #ebebeb;
    padding-left: 15px;
    display: flex;
    align-items: center;
}
.content{
    background-color: #f5f5f5;
    padding-bottom: 8px;
    button{
        font-size: 15px;
        background-color: #fff;
        outline: none;
        border: 1px solid #ebebeb;
        margin: 15px 0 0 13px;
        padding: 12px 35px 10px;
    }
}
.pos{
    button{
        padding: 12px 15px 10px;
    }
}
.letter{
    background-color: #f5f5f5;
    .city{
        margin: 0 15px;
        height: 45px;
        font-size: 14px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
    }
}
.nav{
    position: fixed;
    top: 80px;
    right: 5px;
    font-size: 14px;
    ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        li{
            margin-bottom: 5px;
            color: #666;
        }
    }
}
</style>